<!DOCTYPE html>
<html>
  <head>
    <title>成都市龙泉驿区北泉路社区社区医院医生管理系统</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="loginPage" class="container-fluid">
      <div
        class="row form-box d-flex justify-content-center align-content-center height100"
      >
        <div class="rounded bg-light p-5 col-lg-6 col-md-8 col-sm-12 col-xl-5">
          <h5 class="form-title text-center mb-4">{{title}}</h5>
          <form>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{usernameTitle}}</label>
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="username"
                  placeholder="请输入您的账号"
                  v-model="username"
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{passwordTitle}}</label>
              <div class="col-sm-10">
                <input
                  type="password"
                  class="form-control"
                  id="password"
                  placeholder="请输入您的密码"
                  v-model="password"
                />
              </div>
            </div>
            <div class="form-group row mt-5">
              <div class="col-sm-12">
                <button
                  type="button"
                  class="btn btn-primary btn-block btn-success"
                  id="loginBtn"
                  v-on:click="loginAccount"
                >
                  登录
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="./utils/vue/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#loginPage",
        data: {
          title: "成都市龙泉驿区北泉路社区社区医院医生管理系统",
          usernameTitle: "账号：",
          usernameHolder: "请输入您的账号",
          username: "",
          passwordTitle: "密码：",
          passwordHolder: "请输入您的密码",
          password: "",
        },
        methods: {
          loginAccount() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
              if (xhr.readyState === 4 && xhr.status === 200) {
                let res = JSON.parse(xhr.responseText);
                if (res.code === 0) {
                  location.href = "/html/access.html";
                } else {
                  console.log(`res`, res);
                }
              }
            };
            xhr.open("post", "/login", true);
            xhr.setRequestHeader(
              "Content-type",
              "application/x-www-form-urlencoded"
            );
            xhr.send(`username=${this.username}&password=${this.password}`);
          },
        },
      });
    </script>
  </body>
</html>
